<template>
	<view :style="[AppSkinVar]">
		<textarea class="e-m-b-40" :placeholder="$t('user.意见反馈提示')" v-model="text" />
		<upload ref="uploadRef" width="144rpx" height="146rpx" :max="1" :uploadIcon="$staticPath('user/upload.png')"></upload>
		<button class="sub-btn bg-primary c-white" :class="{ 'is-ok': !text }"
			@tap="submit">{{ $t('common.确定') }}</button>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>
<script lang="ts" setup>
	import { ref } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { postFeedback } from '@/common/request/api'
	import {throttle} from '@/common/utils'
	const ctx = useCurrentInstance()

	const uploadRef = ref()
	const text = ref('')
	const loading = ref(false)

	const submit = () => {
		if (loading.value) return
		loading.value = true
		if (text.value) {
			postFeedback({
				content: text.value,
				urls: uploadRef.value.imgList.map(item => item.url).join(',')
			}).then(res => {
				if (res.code == 200) {
					ctx.$toastAndBack(ctx.$t('user.反馈成功'))
				}
			}).finally(() => {
				loading.value = false
			})
		}
	}
</script>

<style lang="scss">
	page {
		padding: 40rpx 30rpx;
	}

	textarea {
		padding: 20rpx 24rpx;
		width: 100%;
		height: 320rpx;
		border-radius: 10rpx;
		border: 2rpx solid #e9e9e9;
	}

	.sub-btn {
		width: 100%;
		height: 100rpx;
		border-radius: 45rpx;
	}
</style>